<template>
  <xhyk-scroll v-bind="$attrs">
    <div class="treeX" :class="{highlight: props.highlight}">
      <el-tree ref="treeDom" :data="treeData" :lazy="isLazy"
               :default-expand-all="props.expandAll"
               :filter-node-method="filterFn"
               :expand-on-click-node="props.clickExpand"
               v-bind="$attrs">

        <template #default="{node,data}">
          <slot name="default" :node="node" :data="data">
            <xhyk-icon v-if="data[propsD.icon]" :type="data[propsD.icon]" size="16"/>
            <span style="padding: 0px 5px;">{{ data[propsD.label] }}</span>
          </slot>
        </template>

      </el-tree>
    </div>
  </xhyk-scroll>
</template>

<script setup>
import {computed, onMounted, ref, watch, nextTick, onUnmounted} from 'vue'
import {ElTree} from 'element-plus'
import XhykScroll from "./xhykScroll.vue";
import XhykIcon from './xhykIcon.vue'


const props = defineProps({

  // region 拖拽后列表
  nowTree: {
    type: Object,
    default: []
  },
  // endregion

  // region 传入data时则不启用懒加载
  data: {
    type: Object,
    default: undefined
  },
  // endregion

  // region 懒加载数据，优先级比data低
  lazyData: {
    type: Object,
    default: undefined
  },
  // endregion

  // region 映射字段
  treeProps: {
    type: Object,
    default: {
      // value: 'id',
      // label: 'label',
      // children: 'children',
      // // 是否有下一层,true为没有,不再显示下标符合
      // isLeaf: 'leafe',
      // icon: 'icon'
    }
  },
  // endregion

  // region 高亮显示
  highlight: {
    type: Boolean,
    default: true
  },
  // endregion

  // region 默认展开全部
  expandAll: {
    type: Boolean,
    default: false
  },
  // endregion

  // region 过滤筛选

  search: {
    type: String,
    default: ''
  },

  // 过滤筛选方法
  filterNodeMethod: {
    type: Function,
    default: undefined
  },

  // endregion


  // region 点击展开
  clickExpand: {
    type: Boolean,
    default: false
  },
  // endregion
})

const emit = defineEmits(['update:nowTree'])

const treeDom = ref({})

// region 映射字段
const propsD = computed(() => {
  const result = {
    value: 'id',
    label: 'label',
    children: 'children',
    // 是否有下一层,true为没有,不再显示下标符合
    isLeaf: 'leafe',
    icon: 'icon'
  }

  for (let key in props.treeProps) {
    if (props.treeProps[key]) {
      result[key] = props.treeProps[key]
    }
  }

  return result
})
// endregion

// region 树形机构数据，和是否懒加载

const isLazy = ref(false)

const treeData = ref([])

watch(() => props.data, (newV) => {
  if (newV != null && newV != undefined) {
    isLazy.value = false
    treeData.value = newV
  }
}, {immediate: true, deep: true})

watch(() => props.lazyData, (newV, oldV) => {
  if (props.data == null || props.data == undefined) {
    isLazy.value = true
    treeData.value = newV
  }
}, {immediate: true, deep: true})

// endregion

// region 更新当前列表给父级
watch(() => treeData.value, (newV, oldV) => {
  emit('update:nowTree', newV)
}, {immediate: true, deep: true})
// endregion


// region 过滤筛选

const filterFn = (value, data, node) => {
  if (typeof props.filterNodeMethod == 'function') {
    return props.filterNodeMethod(value, data, node)
  }
  if (value) {
    const temp = data[propsD.value.label] || ''
    return temp.toLowerCase().includes(value.toLowerCase())
  } else {
    return true
  }
}

watch(() => props.search, (newV, oldV) => {
  nextTick(() => {
    treeDom.value.filter(newV)
  })
})

// endregion

</script>

<style scoped lang='scss'>

// region 高亮显示
.highlight {
  // 是否高亮显示当前选中
  :deep(.is-current) > .el-tree-node__content {
    color: var(--menuSysColor);
    background-color: var(--menuSysColor2);
  }
}

// endregion

.treeX {
  width: 100%;
  margin-bottom: 10px;
  // 溢出部分也显示
  .el-tree {
    width: 100% !important;
  }

  :deep(.el-tree-node) {
    width: fit-content;
    min-width: 100% !important;
  }
}
</style>